<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">联系人</text>
			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号</text>
			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">地址</text>
			<text @click="chooseLocation" class="input">{{ addressData.addressName }}</text>
			<text class="yticon icon-shouhuodizhi"></text>
		</view>
		<view class="row b-b">
			<text class="tit">门牌号</text>
			<input class="input" v-model="addressData.note" type="text" placeholder="如6栋6单元606" placeholder-class="placeholder" />
		</view>

		<view class="row default-row">
			<text class="tit">设为默认</text>
			<switch :checked="addressData.defaule" color="#fa436a" @change="switchChange" />
		</view>
		<button class="add-btn" @click="confirm">提交</button>
	</view>
</template>

<script>
export default {
	data() {
		return {
			addressData: {
				name: '',
				mobile: '',
				addressName: '在地图选择',
				address: '',
				area: '',
				default: false,
				note: '',
				lon:'',
				lat:''
			}
		};
	},
	onLoad(option) {
		let title = '新增收货地址';
		// if (option.type === 'edit') {
		// 	title = '编辑收货地址';
		// 	this.addressData = JSON.parse(option.data);
		// }
		// this.manageType = option.type;
		uni.setNavigationBarTitle({
			title
		});
	},
	methods: {
		switchChange(e) {
			this.addressData.default = e.detail;
		},

		//地图选择地址
		chooseLocation() {
			uni.getLocation({
				type:'wgs84',
				geocode:true,
				success: function (res) {
					console.log(res);
					console.log(res.address);
				            console.log('当前位置的经度：' + res.longitude);
				            console.log('当前位置的纬度：' + res.latitude);
				        }
			});
			
			uni.chooseLocation({
				success: data => {
					this.addressData.addressName = data.name;
					this.addressData.address = data.name;
					this.addressData.lon=data.longitude;
					this.addressData.lat=data.latitude;
					console.log(this.addressData.lon);
					console.log(data)
				}
			});
		},

		//提交
		confirm() {
			let data = this.addressData;
			if (!data.name) {
				this.$api.msg('请填写收货人姓名');
				return;
			}
			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
				this.$api.msg('请输入正确的手机号码');
				return;
			}
			if (!data.address) {
				this.$api.msg('请在地图选择所在位置');
				return;
			}

			let ownerId = this.$store.state.userInfo.id;
			//发送添加地址请求
			uni.request({
				url: this.baseurl+'address/addAddress',
				method: 'POST',
				//post请求需要添加头信息，不然请求不成功
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
					data: {
						uid: this.$store.state.userInfo.id, //this.$store.state.userInfo.ownerId;   由于还没做登录操作，所以这里是模拟的
						siteDetails: this.addressData.addressName,
						siteDefault: this.addressData.default ? 1 : 0,
						siteNote: this.addressData.note,
						siteTelephone: this.addressData.mobile,
						siteName: this.addressData.name,
						lon:this.addressData.lon,
						lat:this.addressData.lat,
					},
					success: res => {
					if (res.data == 200) {
						this.$api.msg(`添加成功`);
						setTimeout(() => {
							// this.$api.prePage().getData(2)
							uni.navigateBack();//返回
							// history.back();
							
							//成功后再到address这个页面
							// uni.navigateTo({
							// 	url:'/pages/address/address'
							// })
						}, 800);
					} else {
						this.$api.msg('添加失败');
					}
				},
				
			});
		}
	}
};
</script>

<style lang="scss">
page {
	background: $page-color-base;
	padding-top: 16upx;
}

.row {
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 30upx;
	height: 110upx;
	background: #fff;

	.tit {
		flex-shrink: 0;
		width: 120upx;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.input {
		flex: 1;
		font-size: 30upx;
		color: $font-color-dark;
	}
	.icon-shouhuodizhi {
		font-size: 36upx;
		color: $font-color-light;
	}
}
.default-row {
	margin-top: 16upx;
	.tit {
		flex: 1;
	}
	switch {
		transform: translateX(16upx) scale(0.9);
	}
}
.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 690upx;
	height: 80upx;
	margin: 60upx auto;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
